<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <el-select
          v-model="boatId"
          :placeholder="$t('operation.select')"
          size="large"
          style="width: 240px"
          filterable
          @change="change"
        >
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.model"
            :value="item.id"
          />
        </el-select>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <div>
      <div class="row">
        <span>{{ $t('boat.zs') }}</span>
          <pics-upload :allow="!!boatId" v-model="formParams.zs" @upload="upload($event, 1)" @remove="remove" @move="move" />
      </div>
      <div class="row">
        <span>{{ $t('boat.wg') }}</span>
          <pics-upload :allow="!!boatId" v-model="formParams.wg" @upload="upload($event, 2)" @remove="remove" @move="move" />
      </div>
      <div class="row">
        <span>{{ $t('boat.ns') }}</span>
          <pics-upload :allow="!!boatId" v-model="formParams.ns" @upload="upload($event, 3)" @remove="remove" @move="move" />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
//引入请求
import { vesselsGetAll } from '@/api/boat/basic'
import { albumGet, albumAdd, albumDelete, updateImgIndex, updateImgIndexBatch } from '@/api/boat/album'
//引入ts类型
import { ElMessage } from 'element-plus'
import Save from './save.vue'
const formParams = reactive({
  zs: '',
  wg: '',
  ns: '',
})
const auths = {
  add: '/t-vessels-info/add',
  edit: '/t-vessels-info/update',
  del: '/t-vessels-info/delete',
}
let boatId = ref('')
const save = ref()
//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let list = ref([])
const upload = (e, type) => {
  let { urls, curIdx } = e
  urls.forEach((url, idx) => add(url, type, curIdx + idx))
}
const remove = (e) => {
  removeRow(e.id)
}
//组件挂载完毕
onMounted(() => {
  getBoats()
})
const getBoats = async () => {
  let { status, data, msg } = await vesselsGetAll()
  if (status == 200) {
    list.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}
const change = e => {
  getBoatAlbum(e)
}
let pics = ref([])
const getBoatAlbum = async (vesselId) => {
  let { status, data, msg } = await albumGet({
    vesselId
  })
  if (status == 200) {
    let zs = [], wg = [], ns = []
    data.forEach(v => {
      if (v.imgType == 1) {
        zs.push(v)
      } else if (v.imgType == 2) {
        wg.push(v)
      } else if (v.imgType == 3) {
        ns.push(v)
      }
    })
    formParams.zs = zs
    formParams.wg = wg
    formParams.ns = ns
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}

const add = async (imgUrl, imgType, imgIndex) => {
  let {data} = await albumAdd({
    imgUrl,
    imgType,
    vesselsId: boatId.value,
    imgIndex
  })
  getBoatAlbum(boatId.value)
}

const removeRow = async (id) => {
  let result: any = await albumDelete(id)
  if (result.status == 200) {
    //提示信息
    ElMessage({ type: 'success', message: '删除成功' })
  } else {
    //删除失败
    ElMessage({ type: 'error', message: '系统数据不能删除' })
  }
}

const move = (list) => {
  updateImgIndexBatch({
    ids: list.map(v => v.id),
    imgIndexs: list.map(v => v.imgIndex)
  })
}
</script>

<style scoped>
.number {
  text-align: center;
}
span {
  line-height: 1.5;
}
</style>
